<template>
	<view class="container">
		<image src="@/static/cat-7.png" class="headicon" v-if="isLogin"></image>
		<image v-else class="headicon" src="/static/my_normal.png"></image>
		<view class="text-area">
			<text class="title" v-if="isLogin">{{zhou.name}}</text>
			<button type="primary" size="mini" @click="toLogin" v-else>点击登录</button>
		</view>
		<view style="margin: 20rpx; width: 100%;">
			<view class="entry">个人信息</view>
			<view class="entry">订单列表</view>
			<view class="entry">修改密码</view>
			<view class="entry">意见反馈</view>
		</view>
		<button v-if="isLogin" type="primary" size="default" style="width: 100%;" :disabled="!isLogin" @click="logout">退出</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {
					"id": 22,
					"nickname": "",
					"password": 123,
					"telephone": "12345678912",
					"icon": "/images/head_icon.png",
				},
				zhou:{
					name:''
				}
			}
		},
		onLoad() {},
		onShow() {
			// debugger
			// console.log('123')
			
			this.isLogin = uni.getStorageSync('isLogin') === '1'
			
			this.zhou = uni.getStorageSync('userInfo')
			console.log(this.zhou)
		},
		methods: {
			logout() {
				uni.setStorageSync('isLogin', '0')
				this.isLogin = false
			},
			toLogin(e) {
				console.log('a')
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
	}

	.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20rpx;
		}
	
		.headicon {
			height: 200rpx;
			width: 200rpx;
			margin-top: 80rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
			border-radius: 50%;
		}
	
		.text-area {
			display: flex;
			justify-content: center;
		}
	
		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}
	
		.entry {
			width: 100%;
			text-align: left;
			height: 3em;
			line-height: 3em;
			text-indent: 1em;
			border-top: #CCC solid 1rpx;
		}
	
		.entry:last-of-type {
			border-bottom: #CCC solid 1rpx;
		}
	
		.entry::after {
			content: '';
			background-image: url('../../static/more.png');
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			margin-top: 0.5em;
			background-size: contain;
			right: 50rpx;
		}
</style>